<!--
 * @Author: 杨光辉(GerhardYang)
 * @Date: 2021-08-09 09:04:39
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-09-14 15:14:08
 * @Description: file content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <a-card
    class="pathGuid-list"
    title="路径规划结果"
    size="small"
    style="width: 300px"
  >
    <a slot="extra" href="#" title="关闭" @click="onClose">
      <img src="../../../assets/imgs/icons/icon_basic_close.svg" />
    </a>
    <div>
      <a-steps
        class="route-node"
        :current="1"
        direction="vertical"
        @change="toGuidelocation"
      >
        <a-step status="finish" v-if="startpoi.startname">
          <img
            style="width: 20px; height: 20px"
            slot="icon"
            src="../../../assets/imgs/icons/icon_搜索_起点.svg"
          />
          <div slot="description">从此处出发</div>
          <a slot="title"> {{ startpoi.startname }}</a>
        </a-step>
        <a-step status="finish" v-if="!startpoi.startname">
          <img
            style="width: 20px; height: 20px"
            slot="icon"
            src="../../../assets/imgs/icons/icon_搜索_起点.svg"
          />
          <div slot="description">从此处出发</div>
          <a slot="title"> {{ firstpoiname }}</a>
        </a-step>
        <a-step
          status="finish"
          v-for="(item, index) in currentRouteGuide"
          :key="index"
          :style="{ display: item.properties.weight != 0 ? 'block' : 'none' }"
        >
          <img
            style="width: 20px; height: 20px"
            slot="icon"
            src="../../../assets/imgs/icons/icon_路径规划优化.svg"
          />
          <div slot="description">
            {{
              item.properties.description
                .slice(0, item.properties.description.length - 1)
                .replace(/[0-9].+/g, "") +
              item.properties.weight.toFixed(2) +
              "米"
            }}
          </div>
          <a slot="title"
            >{{
              item.properties.description.replace(/[0-9].+/g, "").split("米")[0]
            }}
          </a>

          <!-- <icon-font slot="icon" type="icon-show-route"
        /> -->
        </a-step>
        <a-step status="finish" v-if="!endpoi.endname">
          <img
            style="width: 20px; height: 20px"
            slot="icon"
            src="../../../assets/imgs/icons/icon_搜索_终点.svg"
          />
          <div slot="description">到达终点</div>
          <a slot="title">{{ lastpoiname }} </a>

          <!-- <icon-font slot="icon" type="icon-show-route"
        /> -->
        </a-step>
        <a-step status="finish" v-if="endpoi.endname">
          <img
            style="width: 20px; height: 20px"
            slot="icon"
            src="../../../assets/imgs/icons/icon_搜索_终点.svg"
          />
          <div slot="description">到达终点</div>
          <a slot="title">{{ endpoi.endname }} </a>

          <!-- <icon-font slot="icon" type="icon-show-route"
        /> -->
        </a-step>
      </a-steps>
    </div>
    <!-- </a-collapse-panel>
    </a-collapse> -->
  </a-card>
</template>

<script>
import L from "leaflet";
import "leaflet-polylinedecorator";
// import { Icon } from "ant-design-vue";
// const IconFont = Icon.createFromIconfontCN({
//   scriptUrl: "./iconfont/iconfont.js",
// });
export default {
  data() {
    return {
      pointnumber: 0,
      text: ``,
      activeKey: ["1"],
      expandIconPosition: "right",
      currentRouteGuide: null,
      currentkey: 0,
      isSearchpoi: false,
      startpoi: this.path.start,
      endpoi: this.path.end,
      pathlist: this.path.pathlist,
      firstpoiname: null,
      lastpoiname: null,
    };
  },
  components: {},
  computed: {
    map() {
      return this.$store.state.map;
    },
    NetworkLayer() {
      return this.$store.state.config.NetworkLayer;
    },
    routeGroup() {
      return this.$store.state.routeGroup;
    },
    pointfeature() {
      return new L.featureGroup().addTo(this.routeGroup);
    },
  },
  props: ["path"],
  mounted() {
    console.log(this.path);
    this.defultOpenFirst();
  },
  methods: {
    defultOpenFirst() {
      this.routelinecoordinates =
        this.pathlist[this.currentkey].route.geometry.coordinates;

      this.currentRouteGuide =
        this.pathlist[this.currentkey].pathGuideItems.features;
      this.firstpoiname = this.currentRouteGuide[0].properties.description;
      let i = this.currentRouteGuide.length - 1;
      this.lastpoiname = this.currentRouteGuide[i].properties.description;
      // this.startGuide= this.currentRouteGuide[0]
      // this.endGuide=this.currentRouteGuide[]
      // console.log("daohajng", this.currentRouteGuide);
      this.route2map(this.routelinecoordinates);
    },
    onClose() {
      this.currentRouteGuide = null;
      this.firstpoiname = null;
      this.lastpoiname = null;
      this.pathlist = [];
      this.$parent.pathlist = [];
      this.routeGroup.clearLayers();
    },
    toGuidelocation(key) {
      if (key != 0) key--;
      if (key == this.currentRouteGuide.length) {
        key = this.currentRouteGuide.length - 1;
      }
      let feature = this.currentRouteGuide[key];
      // console.log(key, this.currentRouteGuide);
      if (!feature) {
        return;
      }
      this.pointfeature.clearLayers();
      // console.log("定位到导航定位", feature);
      let icon = L.icon({
        iconUrl: "./img/icons/tu.png",
      });
      L.geoJSON(feature, {
        style: function () {
          return { color: "blue", weight: 5 };
        },
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            icon: icon,
          });
        },
      }).addTo(this.pointfeature);
      this.map.fitBounds(this.pointfeature.getBounds());
      // this.map.zoomOut();
    },
    chengcurrentRouteGuide(key) {
      if (!key) {
        return;
      }
      if (key == this.currentkey) {
        return;
      }
      this.currentkey = key;
      this.routelinecoordinates =
        this.pathlist[this.currentkey].route.geometry.coordinates;

      this.currentRouteGuide =
        this.pathlist[this.currentkey].pathGuideItems.features;
      this.firstpoiname = this.currentRouteGuide[0].properties.description;
      let i = this.currentRouteGuide.length - 1;
      this.lastpoiname = this.currentRouteGuide[i].properties.description;
      this.route2map(this.routelinecoordinates);
    },
    removeLine() {
      this.routeGroup.removeLayer(
        this.routeGroup.getLayer(this.routeGroup.getLayerId(this.routeLine))
      );
      this.routeGroup.removeLayer(
        this.routeGroup.getLayer(this.routeGroup.getLayerId(this.lineDecorator))
      );
    },
    route2map(latlngsArray) {
      if (this.routeLine) {
        this.routeGroup.removeLayer(
          this.routeGroup.getLayer(this.routeGroup.getLayerId(this.routeLine))
        );
        this.routeGroup.removeLayer(
          this.routeGroup.getLayer(
            this.routeGroup.getLayerId(this.lineDecorator)
          )
        );
      }
      let lineOptions = {
        color: "green",
        weight: 8,
        opacity: 0.6,
      };
      // console.log(latlngsArray);
      let i = 0;
      let latlngs = [];
      latlngsArray.map((item) => {
        latlngs.push([]);
        item.map((item) => {
          latlngs[i].push([item[1], item[0]]);
        });
        i++;
      });
      this.routeLine = L.polyline(latlngs, lineOptions).addTo(this.routeGroup);
      // console.log(latlngs);
      // 轨迹方向箭头
      this.lineDecorator = L.polylineDecorator(this.routeLine, {
        patterns: [
          {
            repeat: 50,
            symbol: L.Symbol.arrowHead({
              pixelSize: 5,
              headAngle: 75,
              polygon: false,
              pathOptions: {
                stroke: true,
                weight: 2,
                color: "#FFFFFF",
              },
            }),
          },
        ],
      }).addTo(this.routeGroup);
      this.map.fitBounds(this.routeGroup.getBounds());
    },
  },
};
</script>
<style lang="less">
.route-node::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.route-node::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px @themeBackgroundColor;
  background: @themeBackgroundColor;
}
.route-node::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px @themeBackgroundColor;
  border-radius: 5px;
  background: #ededed;
}
</style>
<style lang="less" scoped>
.pathGuid-list {
  opacity: 0.9;
  border-radius: 4px;
  /deep/ .ant-card-head {
    user-select: none;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
  }

  /deep/.ant-card-body {
    padding: 24px;
    padding-top: 10px;
    zoom: 1;
    min-height: 100px;
    max-height: 480px;
    overflow: auto;
    .route-node {
      .ant-collapse-item > .ant-collapse-header {
        background: #f4f9fd;
      }
      .ant-steps-item {
        position: relative;
        display: inline-block;
        flex: 1;
        vertical-align: top;
        left: 10px;
        // margin-top: 18px;
        height: 65px;
      }
      .ant-steps-vertical .ant-steps-item-content {
        display: block;
        min-height: 48px;
        overflow: hidden;
        /* left: 100px; */
        margin-left: 50px;
      }
      .ant-steps-item-finish
        > .ant-steps-item-container
        > .ant-steps-item-content
        > .ant-steps-item-title {
        font-size: 15px;

        > a {
          color: black;
          text-decoration: none;
          background-color: transparent;
          outline: none;
          cursor: pointer;
          transition: color 0.3s;
          font-family: "Microsoft YaHei";
          -webkit-text-decoration-skip: objects;
        }
      }

      .ant-divider-horizontal {
        display: block;
        clear: both;
        width: 100%;
        min-width: 100%;
        height: 1px;
        margin: 0px 0;
        margin-top: 10px;
      }
    }
  }
}
</style>
